<template>
  <div class="dashboard-container">
    <div class="adminContent">
      <div class="butList">
        <div>审批管理</div>
        <div class="add" @click="addHander('add')"><span>+</span> 创建新审批 </div>
      </div>
      <div class="cont">
        <div v-for="item in dataes" :key="item.id" class="itemCont">
          <div class="contTit">{{ typeTitle(item.groupType) }}</div>
          <div class="itemList">
            <div v-for="(it, ind) in item.definitionList" :key="ind" class="item">
              <div class="bod">
                <img :src="it.icon" width="37" height="37" alt="">
                <span> {{ it.name }} </span>
              </div>
              <div class="foot">
                <span @click="goFlow('/approvalFlow/table', it.id)">表单设计</span>
                <span @click="goFlow('/approvalFlow/flow', it.id)">流程编辑</span>
                <span @click="goFlow('/approvalFlow/base', it.id)">审批设置</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Cascader from './../../components/Cascader'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      dataes: [],
      loading: '',
      pageCont: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    ...mapGetters([
      'flowId'
    ])
  },
  components: {
    // Cascader
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const { page, pageSize } = this.pageCont
      this.$store.dispatch('approval/getApprovalAdminListAct', { page, pageSize }).then((res) => {
        this.dataes = res
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    async addHander() {
      await this.$store.dispatch('approval/setflowid', '')
      await this.$store.dispatch('approval/setflowdata', 'add')
      this.$router.push('/approvalFlow/base')
    },

    typeTitle(key) {
      switch (key) {
        case '1' :
          return '出勤休假'
        case '2' :
          return '财务'
        case '3':
          return '人事'
        case '4' :
          return '行政'
        case '5':
          return '其他'
      }
    },
    stopHandel() {
      console.log(5678)
    },
    goFlow(url, id) {
      this.$store.dispatch('approval/setflowid', id)
      this.$router.push(url)
    },
    getValue(val) {
      this.ruleForm.participates = val.map(n => {
        return { objectId: n.id, objectType: n.type }
      })
    },
    getValueUn(val) {
      this.ruleForm.notParticipates = val.map(n => {
        return { objectId: n.id, objectType: n.type }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .adminContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          /*color: #3345ff;*/
          font-size: 16px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
          .add{
            color: #3345ff;
          }
        }
        .cont {
          .itemCont{
            padding:0 20px;
            margin: 20px 0;
            .contTit{
              font-size: 14px;
              margin: 20px 0;
              &::before{
                content: ' ';
                display: inline-block;
                border-radius: 2px;
                width: 10px;
                height: 10px;
                margin-right:10px;
                background: #3345ff;
              }
            }
            .itemList{
              display: flex;
              flex-wrap: wrap;
              font-size: 14px;
              .item{
                background: #fff;
                width: 340px;
                margin-right: 15px;
                margin-bottom: 15px;
                border-radius: 3px;
                box-shadow: 0px 0px 4px #e8e9ec;
                .bod{
                  display: flex;
                  padding: 15px;
                  line-height: 37px;
                  img{
                    margin-right: 10px;
                  }
                }
                .foot{
                  display: flex;
                  border-top: solid 1px #e8e9ec;
                  padding:10px 0px;
                  color: #3345ff;
                  span{
                    display: inline-block;
                    text-align: center;
                    flex:1;
                    border-right: solid 1px #e8e9ec;
                    padding: 0 20px;
                    cursor: pointer;
                    &:last-child{
                      border-right: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
